<!--
子绝父相
    案例：轮播图。

    子盒子：绝对定位，脱标，不占用原来位置，会打乱后面的标准流布局（被定位压着）
    父盒子：相对定位，不脱标，仍占有原来位置，保留着标准流布局排布
        - 父盒子不会脱标，原来位置仍占着
        - 父盒子只设置相对定位，不设置偏移量，只是用来约束子盒子的绝对定位移动

小结：
    父级需要占用位置，设置为相对定位
    子级不需要占用位置，设置为绝对定位

    相对定位常用作绝对定位的父级，这就是“子绝父相”

注意：子绝父相不是绝对的，需要根据需求场景、特点去选择，例如子绝父绝、子相父绝、子相父相。
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .father {
        /* 父相 */
        position: relative;
        width: 500px;
        height: 300px;
        margin: 0 auto;
        background: skyblue;
    }
    .son {
        /* 子绝 */
        position: absolute;
        width: 200px;
        height: 100px;
        background: cyan;
    }
    .left {
        /* 负值可以越界显示（只要父盒子没有设置overflow:hidden;） */
        left: -40px;
        top: 50px;
    }
    .right {
        right: 0;
        top: 20px;
    }
    .other {
        width: 600px;
        height: 100px;
        margin: 0 auto;
        background: red;
    }
</style>

<div class="father">
    <div class="son left">son: left</div>
    <div class="son right">son: right</div>
</div>
<div class="other">后面的标准流块盒子</div>